<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link href='https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>Ocean by jbouny</title>
  </head>

  <body>
    <div id="container">
      <div class="inner">

        <header>
          <h1>Ocean</h1>
          <h2>Realistic water shader for Three.js</h2>
        </header>

        <section id="downloads" class="clearfix">
          <a href="https://github.com/jbouny/ocean/zipball/master" id="download-zip" class="button"><span>Download .zip</span></a>
          <a href="https://github.com/jbouny/ocean/tarball/master" id="download-tar-gz" class="button"><span>Download .tar.gz</span></a>
          <a href="https://github.com/jbouny/ocean" id="view-on-github" class="button"><span>View on GitHub</span></a>
        </section>

        <hr>

        <section id="main_content">
          <h1>
<a id="ocean---realistic-water-shader-for-threejs" class="anchor" href="#ocean---realistic-water-shader-for-threejs" aria-hidden="true"><span class="octicon octicon-link"></span></a>ocean - Realistic water shader for Three.js</h1>

<p>This project propose an implementation of a three.js shader to provide a realistic plane water effect.
It can be used to render water in some situations like complete ocean or small surface of water in real time.</p>

<h3>
<a id="demos" class="anchor" href="#demos" aria-hidden="true"><span class="octicon octicon-link"></span></a>Demos</h3>

<ul>
<li><a href="https://jbouny.github.io/ocean/demo/">Demo</a></li>
<li><a href="https://jbouny.github.io/ocean/demo_basic/">Basic demo</a></li>
<li><a href="https://jbouny.github.io/ocean/demo_mobile/">Mobile control demo</a></li>
<li><a href="https://jbouny.github.io/ocean/demo_test/">Fog and rotation demo</a></li>
</ul>

<h3>
<a id="dependencies" class="anchor" href="#dependencies" aria-hidden="true"><span class="octicon octicon-link"></span></a>Dependencies</h3>

<ul>
<li>Three.js r70 to render the scene : <a href="https://github.com/mrdoob/three.js/">https://github.com/mrdoob/three.js/</a>
</li>
<li>JQuery 1.10.2 as a helper : <a href="https://github.com/jquery/jquery">https://github.com/jquery/jquery</a>
</li>
<li>Terrain-generator for procedural terrain generation : <a href="https://github.com/jbouny/terrain-generator">https://github.com/jbouny/terrain-generator</a>
</li>
</ul>

<h3>
<a id="sources" class="anchor" href="#sources" aria-hidden="true"><span class="octicon octicon-link"></span></a>Sources</h3>

<ul>
<li><p>Slayvin - <a href="http://slayvin.net">http://slayvin.net</a>
Use of the flat mirror implementation for three.js as a base : <a href="https://code.google.com/p/mirror-three-js/source/browse/FlatMirror.js">https://code.google.com/p/mirror-three-js/source/browse/FlatMirror.js</a></p></li>
<li><p>Stemkoski - <a href="http://www.adelphi.edu/%7Estemkoski">http://www.adelphi.edu/~stemkoski</a>
Use of the adaptation of the flat mirror implementation to provide a water effect</p></li>
<li><p>Jonas Wagner - <a href="http://29a.ch/">http://29a.ch/</a>
The real rendering come from here : <a href="http://29a.ch/slides/2012/webglwater">http://29a.ch/slides/2012/webglwater</a>, an explanation on how to render water. With some adaptation of its shader, results are here.</p></li>
</ul>

<h3>
<a id="screenshot" class="anchor" href="#screenshot" aria-hidden="true"><span class="octicon octicon-link"></span></a>Screenshot</h3>

<p><img src="screenshots/ocean1.jpg" alt="Alt text" title="Example of a water rendering with an ocean"></p>
        </section>

        <footer>
          Ocean is maintained by <a href="https://github.com/jbouny">jbouny</a><br>
          This page was generated by <a href="http://pages.github.com">GitHub Pages</a>. Tactile theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.
        </footer>

        
      </div>
    </div>
  </body>
</html>
